<!--
 * @Author: hrg
 * @Date: 2023-11-29 14:06:30
 * @LastEditTime: 2023-12-02 08:51:56
 * @FilePath: \easy_dashboard\web\src\views\data\list.vue
 * @Description: 
-->
<template>
  <a-layout style="padding: 24px 0; background: #fff">
    <a-layout-sider
      width="200"
      style="background: #fff"
    >
      <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        :items="state.items"
        style="height: 100%"
        @select="menuSelect"
      />
    </a-layout-sider>
    <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
      <router-view />
    </a-layout-content>
  </a-layout>
</template>
<script>
	import { reactive, ref, computed, onMounted, onUnmounted, toRef } from "vue";
	import {useRoute,useRouter} from "vue-router"
	import { useMenu } from "@/layout/menu/menu";
	export default {
		setup() {
			const {selectedKeys} = useMenu()
			const openKeys = ref(['/data/list/option1'])
			const route = useRoute()
			const router = useRouter()
			const state = reactive({
				list: '数据列表',
				items:[
					{
						key:"/data/list/option1",
						label:"父级1"
					},{
						key:"key2",
						label:"父级2",
						children:[
							{
								key:"/data/list/option2",
								label:"子级2-1"
							},
							{
								key:"key2-2",
								label:"子级2-2"
							},{
								key:"key2-3",
								label:"子级2-3"
							}
						]
					}
				]
			});

			const routeFunc = ()=>{
			
			}
			routeFunc()

			onMounted(() => {
				// console.log("数据列表部分刚刚挂载",route.path);
			})

			const menuSelect = (a,b)=>{
				router.push(a.key)
          
        
			}
			return {
				state,
				selectedKeys,
				menuSelect,
				openKeys
			};
		}
	};
</script>
